import React from 'react';
import styled from 'styled-components';
import { Icons } from '../../icons';
import { getCssFromSvg } from '../../icons/get-css-from-svg';
import {TreeNode} from 'rc-tree';
import ReactDOMServer from 'react-dom/server';

var checkboxIcon,
    checkboxСheckedIcon,
    сheckboxDisabledIcon,
    сheckboxHoverIcon,
    сheckboxIndeterminateIcon,
    checkboxCheckedDisabledIcon,
    checkboxCheckedHoverIcon,
    checkboxIndeterminateDisabledIcon,
    checkboxIndeterminateHoverIcon,
    treeIcon;

(function(){
    checkboxIcon = getCssFromSvg(ReactDOMServer.renderToString(<Icons.CheckboxIcon />));
    сheckboxDisabledIcon = getCssFromSvg(ReactDOMServer.renderToString(<Icons.CheckboxIcon isfill={true} color="#F8F9F9" />));
    сheckboxHoverIcon = getCssFromSvg(ReactDOMServer.renderToString(<Icons.CheckboxIcon isfill={true} color="white" />));

    checkboxСheckedIcon= getCssFromSvg(ReactDOMServer.renderToString(<Icons.CheckboxCheckedIcon />));
    checkboxCheckedDisabledIcon= getCssFromSvg(ReactDOMServer.renderToString(<Icons.CheckboxCheckedIcon isfill={true} color="#F8F9F9" isStroke={true} stroke="#ECEEF1" />));
    checkboxCheckedHoverIcon = getCssFromSvg(ReactDOMServer.renderToString(<Icons.CheckboxCheckedIcon isfill={true} color="white" isStroke={true} stroke="#A3A9AE" />));

    сheckboxIndeterminateIcon = getCssFromSvg(ReactDOMServer.renderToString(<Icons.CheckboxIndeterminateIcon />));
    checkboxIndeterminateDisabledIcon = getCssFromSvg(ReactDOMServer.renderToString(<Icons.CheckboxIndeterminateIcon isfill={true} color="#F8F9F9" isStroke={true} stroke="#ECEEF1" />));
    checkboxIndeterminateHoverIcon = getCssFromSvg(ReactDOMServer.renderToString(<Icons.CheckboxIndeterminateIcon isfill={true} color="white" isStroke={true} stroke="#A3A9AE" />));

    treeIcon = getCssFromSvg(ReactDOMServer.renderToString(<Icons.CatalogFolderIcon />));
}());

const TreeNodeMenu = styled(TreeNode)`
    
    padding: 0;
    margin: 0 0 6px 0;
    list-style: none;
    white-space: nowrap;
    outline: 0;
    
    font-family: Open Sans;
    font-style: normal;
    font-weight: 600;
    font-size: 14px;
    line-height: 24px;

    position: relative;

    .draggable {
        color: #333;
        -moz-user-select: none;
        -khtml-user-select: none;
        -webkit-user-select: none;
        -ms-user-select: none;
            user-select: none;
        /* Required to make elements draggable in old WebKit */
        -khtml-user-drag: element;
        -webkit-user-drag: element;
    }
    &.drag-over > .draggable {
        background-color: #316ac5;
        color: white;
        border: 1px #316ac5 solid;
        opacity: 0.8;
    }
    &.drag-over-gap-top > .draggable {
        border-top: 2px blue solid;
    }
    &.drag-over-gap-bottom > .draggable {
        border-bottom: 2px blue solid;
    }
    &.filter-node > .rc-tree-node-content-wrapper {
        color: #a60000!important;
        font-weight: bold!important;
    }
    ul {
        margin: 0;
        padding: 0;
    }
    .rc-tree-node-content-wrapper {
        width: 100%;
        display: inline-block;
        padding: 1px 8px 0 8px;
        
        cursor: pointer;
        height: 24px;
        text-decoration: none;
        vertical-align: top;

        position: absolute;
        left: 0;

    }
    span.rc-tree-switcher,
    span.rc-tree-iconEle {
        line-height: 0;
        margin-right: 5px;
        margin-bottom: 2px;
        width: 16px;
        height: 16px;
        display: inline-block;
        vertical-align: top;
        border: 0 none;
        cursor: pointer;
        outline: none;
        background-color: transparent;
        background-repeat: no-repeat;
        background-attachment: scroll;
    }
    span.rc-tree-iconEle {
        display: ${props => props.icon ? 'inline-block' : 'none'};
    }
    span.rc-tree-switcher
    {
        background-image: url('');
        z-index: 1;
        position: relative;
    }
    span.rc-tree-iconEle{
        margin: 3px 7px 3px 12px;
        height: 17px;
        width: 17px;
    }
    span.rc-tree-switcher{
        margin: 9px 4px 0 4px;
        height: 8px;
        width: 8px;
    }
    span.rc-tree-switcher.rc-tree-icon__customize,
    span.rc-tree-checkbox.rc-tree-icon__customize,
    span.rc-tree-iconEle.rc-tree-icon__customize {
        background-image: none;
    }
    span.rc-tree-icon_loading {
        margin-right: 2px;
        vertical-align: top;
        background: url('') no-repeat scroll 0 0 transparent;
    }
    span.rc-tree-switcher.rc-tree-switcher-noop {
        cursor: auto;
    }
    span.rc-tree-switcher.rc-tree-switcher_open {
        background-position: -93px -56px;
    }
    span.rc-tree-switcher.rc-tree-switcher_close {
        background-position: -75px -56px;
    }
    span.rc-tree-checkbox {
        line-height: 16px;
        margin-right: 5px;
        margin-bottom: 2px;
        display: inline-block;
        vertical-align: middle;
        border: 0 none;
        cursor: pointer;
        outline: none;
        width: 16px;
        height: 16px;
        margin: 0 3px;
        background-repeat: no-repeat;
        background-image: url("data:image/svg+xml,${checkboxIcon}"); 
        
         
    }

    span.rc-tree-checkbox:hover {
        background-image: url("data:image/svg+xml,${сheckboxHoverIcon}");
    }
    span.rc-tree-checkbox.rc-tree-checkbox-checked:hover {
        background-image: url("data:image/svg+xml,${checkboxCheckedHoverIcon}");
    }
    span.rc-tree-checkbox-indeterminate:hover {
        background-image: url("data:image/svg+xml,${checkboxIndeterminateHoverIcon}");
    }
    span.rc-tree-checkbox-checked {
        background-image: url("data:image/svg+xml,${checkboxСheckedIcon}");
    }
    span.rc-tree-checkbox-indeterminate {
        background-image: url("data:image/svg+xml,${сheckboxIndeterminateIcon}");
    }
    span.rc-tree-checkbox-disabled,
    span.rc-tree-checkbox-disabled:hover {
        background-image: url("data:image/svg+xml,${сheckboxDisabledIcon}");
    }
    span.rc-tree-checkbox.rc-tree-checkbox-checked.rc-tree-checkbox-disabled {
        background-image: url("data:image/svg+xml,${checkboxCheckedDisabledIcon}");
    }
    span.rc-tree-checkbox.rc-tree-checkbox-indeterminate.rc-tree-checkbox-disabled {
        background-image: url("data:image/svg+xml,${checkboxIndeterminateDisabledIcon}");
    }
    span.rc-tree-checkbox.rc-tree-checkbox-indeterminate.rc-tree-checkbox-disabled::after {
        content: ' ';
        -webkit-transform: scale(1);
        transform: scale(1);
        position: absolute;
        left: 3px;
        top: 5px;
        width: 5px;
        height: 0;
        border: 2px solid #fff;
        border-top: 0;
        border-left: 0;
    }
    span.rc-tree-title{
        display: inline-block;
        width: ${props => props.icon ? 'calc(100% - 36px)' : 'calc(100% - 20px)'};
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        color: #333;
        padding-left: ${props => props.icon ? '0' : '20px'};
    }
    span.rc-tree-title:first-child{
        max-width: 100%;
    }
    .rc-tree-node-selected {
        background: #DFE2E3;
        mix-blend-mode: normal;
        border-radius: 3px;
        z-index: 0;
    }
    
`;

export default TreeNodeMenu;